<template>
  <div class="pagePersonalCenter">
    <headerT title="我的足迹" />
    <div class="pageNormalBackground headMarginTop pagesMain">
      <div v-if="browsList.length!=0">
        <div class="listBox" v-for="(item,index) in browsList" :key="index" >
          <div class="editBox displayFlex" @click="btnEidt(index)">
            <div class="selectBox" v-if="item.isFlagDel==false"></div>
            <img
              class="selected"
              v-if="item.isFlagDel==true"
              src="../../../static/images/selected.png"
            />
            <div class="time">{{item.created_at}}</div>
          </div>
          <div class="everyBlockBgcolor everyBlockPadding displayFlex list" @click="$tools.goPage_query('goodsDetails',{goods_id:item.goods_id})">
            <div class="list_img">
              <img :src="item.good_img" />
              <div class="hot">高端的养发护发</div>
            </div>

            <div class="list_title">
              <div class="goodsTitle">
                <span>{{item.good_name}}</span>
              </div>
              <div class="goodsPrice">
                <span class="goodsNewPrice">￥{{item.price}}</span>
                <span class="goodsOldPrice">￥{{item.original_price}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-if="browsList.length==0">暂无数据</div>
      <div v-if="browsList.length!=0" class="everyBlockBgcolor everyBlockPadding displayFlex edit">
        <div class="displayFlex editBox1" v-if="isEdit">
          <div>&emsp;</div>
          <div class="editBox" @click="btnEdit">编辑</div>
        </div>
        <div class="displayFlex editBox1 editOperationBox" v-if="!isEdit">
          <div class="displayFlex allSelectBox" @click="btnAllSelect">
            <div class="allBox" v-if="isAllSelect==false"></div>
            <img
              class="selected"
              v-if="isAllSelect==true"
              src="../../../static/images/selected.png"
            />
            <div>全选</div>
          </div>
          <div class="displayFlex">
            <div class="editDel" @click="btnDel">删除</div>
            <div class="editBox" @click="btnEdit">完成</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import {
  browsingHistoryList,
  browsingHistoryDel
} from "@/services/personCenter";
export default {
  name: "myFootprint",
  components: {
    headerT
  },

  data() {
    return {
      needInfo: {
        page: 1,
        pageSize: 10
      },
      totalPage: 0, //总页数
      browsList: [],
      isEdit: true, //是否编辑
      isAllSelect: false, //是否全选
      ids: "" //获取足迹id
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    
    btnDel() {
      //删除足迹
      const _this = this;
      if (_this.ids == "") {
      
        _this.$vux.toast.text("请选择要删除的商品！！！", 'top')
        return;
      }

      _this.$vux.confirm.show({
        title: "提示",
        content: "确定要删除此足迹吗？",
        onCancel() {},
        onConfirm() {
          console.log("确定");
          _this.$vux.loading.show({
            text: "Loading"
          });
          _this
            .$post(browsingHistoryDel, { id: _this.ids })
            .then(res => {
              _this.$vux.loading.hide();
              if (res.code == 200) {
                _this.$vux.toast.text("成功", 'middle')
                _this.needInfo.page = 1;
                _this.getList();
                _this.isAllSelect = false;
              }
            })
            .catch(error => {
              _this.$vux.loading.hide();
            });
        }
      });
    },
    btnEidt(index) {
      //单个选择
      const _this = this;
      _this.browsList[index].isFlagDel = !_this.browsList[index].isFlagDel;
      let arr = [];
      let count = 0;
      _this.browsList.forEach(item => {
        if (item.isFlagDel == true) {
          count++;
          arr.push(item.id);
        }
      });
      if (count == _this.browsList.length) {
        _this.isAllSelect = true;
      } else {
        _this.isAllSelect = false;
      }
      _this.ids = arr.join(",");
    },
    btnAllSelect() {
      //全选
      const _this = this;
      _this.isAllSelect = !_this.isAllSelect;
      if (_this.isAllSelect == true) {
        let arr = [];
        _this.browsList.forEach(item => {
          item.isFlagDel = true;
          arr.push(item.id);
        });
        this.ids = arr.join(",");
      } else {
        _this.browsList.forEach(item => {
          item.isFlagDel = false;
        });
        this.ids = "";
      }
    },
    handleScroll() {
      //分页加载数据
      if (
        document.documentElement.scrollTop + window.innerHeight >=
        document.body.offsetHeight
      ) {
        if (this.needInfo.page > this.totalPage) {
          return;
        } else {
          this.needInfo.page = this.needInfo.page + 1;
          this.getList();
        }
      }
    },
    getList() {
      //足迹列表
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(browsingHistoryList, this.needInfo)
        .then(res => {
          this.$vux.loading.hide();
          res.data.data.forEach(item => {
            item["isFlagDel"] = false;
          });
          this.totalPage = res.data.last_page;
          if (this.needInfo.page == 1) {
            this.browsList = res.data.data;
            this.needInfo.page = res.data.current_page;
          } else {
            this.browsList = [...this.browsList, ...res.data.data];
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    btnEdit() {
      //切换编辑操作
      const _this = this;
      this.isEdit = !this.isEdit;
      if (_this.isEdit == true) {
        _this.isAllSelect = false;
        _this.browsList.forEach(item => {
          item.isFlagDel = false;
        });
      }
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
.pagePersonalCenter {
  .pagesMain {
    padding-bottom: 1.8rem;
  }
  .listBox {
    font-size: 0.34rem;
    color: #4e4e4e;
    .editBox {
      height: 1.11rem;
      padding: 0 0.45rem;
      .selectBox {
        width: 0.44rem;
        height: 0.44rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 50%;
        margin-right: 0.34rem;
      }
    }
  }
  .selected {
    width: 0.44rem;
    height: 0.44rem;
    display: block;
    margin-right: 0.34rem;
  }
  .list {
    box-sizing: border-box;
    height: 3.13rem;
    justify-content: space-between;
  }

  .list_img {
    width: 2.88rem;
    height: 2.44rem;
    text-align: center;
    position: relative;
  }
  .list_img img {
    width: 2.88rem;
    height: 2.44rem;
    display: block;
  }
  .hot {
    width: 2.88rem;
    height: 0.49rem;
    background: rgba(13, 13, 13, 0.23);
    line-height: 0.49rem;
    border-radius: 0.08rem;
    font-size: 0.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    position: absolute;
    bottom: 0rem;
    // left: 0.12rem;
    font-weight: 400;
  }

  .list_title {
    margin-left: 0.3rem;
    width: calc(100% - 3.26rem);
    height: 1.98rem;
    position: relative;
  }
  .isTag {
    background: #f64135;
    color: #ffffff;
    font-size: 0.2rem;
    padding: 0.06rem 0.12rem;
    border-radius: 0.08rem;
  }
  .goodsTitle {
    color: #4e4e4e;
    font-size: 0.34rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    height: 1.05rem;
  }
  .goodsPrice {
    margin-top: 0.4rem;
    line-height: 1.05rem;
  }
  .goodsNewPrice {
    color: #f64135;
    font-size: 0.44rem;
    font-weight: bold;
  }
  .goodsOldPrice {
    color: #9f9f9f;
    font-size: 0.25rem;
    text-decoration: line-through;
    margin-left: 0.12rem;
    font-weight: 400;
  }
  .list_title .yiSale {
    position: absolute;
    width: 1.77rem;
    height: 1.65rem;
    bottom: -0.2rem;
    right: 0.08rem;
  }
  .listBox:last-child {
    margin-bottom: 1.4rem;
  }
  .edit {
    box-sizing: border-box;
    height: 1.38rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    .editBox1 {
      justify-content: space-between;
      width: 100%;
    }
    .editBox {
      width: 2.41rem;
      height: 0.85rem;
      background: linear-gradient(
        90deg,
        rgba(246, 65, 53, 1) 0%,
        rgba(255, 205, 88, 1) 100%
      );
      box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
      border-radius: 1rem;
      text-align: center;
      line-height: 0.85rem;
      color: #ffffff;
      font-weight: bold;
    }
    .editDel {
      width: 2.41rem;
      height: 0.85rem;
      border: 1px solid rgba(246, 65, 53, 1);
      box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
      border-radius: 1rem;
      text-align: center;
      line-height: 0.85rem;
      color: rgba(246, 65, 53, 1);
      margin-right: 0.25rem;
    }

    .allSelectBox {
      width: 1.8rem;
      color: #4e4e4e;
      .allBox {
        width: 0.44rem;
        height: 0.44rem;
        background: #e2e2e2;
        border-radius: 50%;
        margin-right: 0.34rem;
      }
    }
  }
}
</style>
